<template>
	<view>
		<uni-section title="店铺信息" type="line"></uni-section>
		<view class="uni-form-item uni-column">
			<view class="title" style="display: inline-block;font-size: 16px;">店铺名称</view>
			<view class="uni-input-wrapper v-right" >
			    <input class="uni-input" v-model="settingData.shopName" placeholder="请输入店铺名称" style="width: 450rpx;" />
			</view>
		</view>
		<view class="uni-form-item uni-row">
			<view class="title" style="display: inline-block;font-size: 16px;">店铺分享</view>
			<view class="text v-right-lay" style="-webkit-flex: 1;flex: 1;">
				<view class="uni-uploader__input-box" style="margin-left: 10px;margin-top: 10px;">
					<view v-if="settingData.shopUrl==''" class="uni-uploader__input" @tap="toSelectShopUrlImage"></view>
					<view v-else class="has-choosed-image">
						<image :src="settingData.shopUrl" class="thumb-image" style="width: 140rpx; height: 140rpx;"></image>
						<view class="modify-image" @click="toSelectShopUrlImage">更换图片</view>
					</view>
				</view>
			</view>
		</view>
		<uni-section title="支付设置" type="line"></uni-section>
		<view class="uni-form-item uni-column">
			<view class="title" style="display: inline-block;font-size: 16px;">平台支付</view>
			<radio-group name="wechatPay" class="v-right" @change="setWechatPayValue">
				<label>
					<radio value="开启" :checked="(settingData.wechatPay=='开启')?true:false" /><text>开启</text>
				</label>
				<label style="margin-left: 15px;">
					<radio value="关闭" :checked="(settingData.wechatPay=='关闭')?true:false" /><text>关闭</text>
				</label>
			</radio-group>
		</view>
		<view class="uni-form-item uni-column">
			<view class="title" style="display: inline-block;font-size: 16px;">红包支付</view>
			<radio-group name="redPacketPay" class="v-right" @change="setRedPacketPayValue">
				<label>
					<radio value="开启" :checked="(settingData.redPacketPay=='开启')?true:false" /><text>开启</text>
				</label>
				<label style="margin-left: 15px;">
					<radio value="关闭" :checked="(settingData.redPacketPay=='关闭')?true:false" /><text>关闭</text>
				</label>
			</radio-group>
		</view>
		<view class="uni-form-item uni-row" v-if="settingData.redPacketPay=='开启'">
			<view class="title" style="display: inline-block;font-size: 16px;">店主微信</view>
			<view class="text v-right-lay" style="-webkit-flex: 1;flex: 1;">
				<view class="uni-uploader__input-box" style="margin-left: 10px;margin-top: 10px;">
					<view v-if="settingData.adminQrCodeUrl==''" class="uni-uploader__input" @tap="toSelectImage"></view>
					<view v-else class="has-choosed-image">
						<image :src="settingData.adminQrCodeUrl" class="thumb-image" style="width: 140rpx; height: 140rpx;"></image>
						<view class="modify-image" @click="toSelectImage">更换图片</view>
					</view>
				</view>
			</view>
		</view>
		<view class="uni-btn-v" @click="save()">
			<button>保存</button>
		</view>
	</view>
</template>

<script>
	import uniSection from '@/components/uni-ui/uni-section/uni-section.vue'
	import myCloud from '@/common/js/cloud.js';
	import myConst from '@/common/js/const.js'
	export default {
		components: {
			uniSection
		},
		data() {
			return {
				settingData: {},
				id: ''
			}
		},
		onLoad() {
			this.getData();
		},
		methods: {
			getData() {
				const data = {
					action: myConst.ACTION.QUERY,
					params: {}
				}
				myCloud.callFunction(myConst.FUNC_NAME.B_SETTING, data, (res, e) => {
					console.log(res)
					if (res.length > 0) {
						this.id = res[0]._id,
						this.settingData = res[0].data
					}
				}, true);
			},
			save() {
				const data = {
					action: myConst.ACTION.EDIT,
					params: {
						id: this.id,
						data: this.settingData,
						updatetime: new Date().getTime()
					}
				}
				myCloud.callFunction(myConst.FUNC_NAME.B_SETTING, data, (res, e) => {
					this.$api.msg(res);
				}, true);
			},
			toSelectImage() {
				let that = this;
				uni.chooseImage({
					count: 1,
					success(res) {
						console.log(res)
						if (res.tempFilePaths.length > 0) {
							let filePath = res.tempFilePaths[0]
							let cloudPath = res.tempFiles[0].name
							//进行上传操作
							myCloud.uploadFile(filePath, cloudPath,(res) => {
								that.settingData.adminQrCodeUrl = res.fileID;
							})
						}
					}
				});
			},
			toSelectShopUrlImage() {
				let that = this;
				uni.chooseImage({
					count: 1,
					success(res) {
						console.log(res)
						if (res.tempFilePaths.length > 0) {
							let filePath = res.tempFilePaths[0]
							let cloudPath = res.tempFiles[0].name
							//进行上传操作
							myCloud.uploadFile(filePath, cloudPath,(res) => {
								that.settingData.shopUrl = res.fileID;
							})
						}
					}
				});
			},
			setWechatPayValue(e) {
				this.settingData.wechatPay = e.target.value;
			},
			setRedPacketPayValue(e) {
				this.settingData.redPacketPay = e.target.value;
			}
		}
	}
</script>

<style>
	@import url("./../../common/css/uni.css");

	.uni-form-item .title {}

	.uni-btn-v {
		margin-left: 10px;
		margin-right: 10px;
	}

	.modify-image {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 140rpx;
		height: 20px;
		line-height: 20px;
		font-size: 12px;
		color: #fff;
		background: rgba(0, 0, 0, .5);
		cursor: pointer;
	}

	.has-choosed-image {
		position: relative;
		width: 140rpx;
		height: 140rpx;
		text-align: center;
	}

	.uni-uploader__input-box {
		width: 140rpx;
		height: 140rpx;
		border: 1rpx solid #D9D9D9;
		background-color: #ffffff;
		margin-left: 0px;
	}

	.v-right {
		display: inline-block;
		position: absolute;
		margin-left: 100px;
		margin-top: 5px;
	}
</style>
